<template>
  <div class="whole">
    <div>sum:{{ sum }}</div>
    <div>bigSum:{{ bigSum }}</div>
    <div class="dogs">
      <div class="do" v-for="(item, index) in dogs" :key="index">
        <img :src="item" alt="" class="dog" />
      </div>
    </div>

    <button @click="addSum">+1</button>
    <button @click="addDogs">添加一直小狗</button>
  </div>
</template>

<script setup lang="ts" name="dogs">
import { onMounted, onUnmounted } from "vue";
import { useDog } from "../../../hooks/useDog";
import { useSum } from "../../../hooks/useSum";
onMounted(() => {
  addDogs();
  addSum();
});
const { sum, addSum, bigSum } = useSum();
const { dogs, addDogs } = useDog();

onUnmounted(() => {
  console.log("卸载了");
});
</script>

<style scoped lang="scss">
.whole {
  .dogs {
    display: flex;
    margin-right: 5px;
    flex-wrap: wrap;
    .do {
      margin-right: 5px;
      .dog {
        height: 100px;
      }
    }
  }
}
</style>
